<template>
  <div class="MusicAdmin">
    <el-input class="search" placeholder="请输入内容" v-model="word">
      <template #prefix>
        <i class="el-input__icon el-icon-search"></i>
      </template>
    </el-input>
    <div class="searchButto" @click="search">搜索</div>
    <div class="form">
      <div class="heart">
        <div class="heartItem" v-for="(item, index) in hrardList" :key="index">
          {{ item }}
        </div>
      </div>
      <div class="list">
        <div class="itemBox" v-for="(item, index) in list" :key="index">
          <div class="listitem" v-for="(item2, index2) in item" :key="index2">
            {{ item2 }}
          </div>
          <div class="listitem">
            <!-- <img
              src="@/assets/img/common/update.png"
              @click="upIndex(index)"
            />-->
            <img
              src="@/assets/img/common/delete.png"
              @click="deleteMusic(index)"
            />
            <img src="@/assets/img/common/add.png" @click="addTomenu(index)" />
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="添加至歌单" v-model="dialogVisible" width="30%">
      <el-input
        class="input"
        v-model="menuId"
        placeholder="请输入歌单id"
      ></el-input>
      <div style="display: flex; justify-content: center; align-items: center">
        <div class="addmenu" @click="toAdd">添加</div>
      </div>
    </el-dialog>
  </div>
</template>
  <script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { musicGetall, deleteMusicByid, searchMusic ,insertbymusiclist} from "@/api/song";
export default {
  setup() {
    const state = reactive({
      dialogVisible: false,
      list: [{ id: 0 }],
      songName: "",
      menuId: "",
      hrardList: [
        "id",
        "作者",
        "播放数量",
        "喜欢人数",
        "音乐名称",
        "音乐类型",
        "url",
        "操作",
      ],
      word: "",
      index:-1
    });
    const upIndex = (index: any) => {
      state.dialogVisible = true;
    };
    const deleteMusic = (index: any) => {
      deleteMusicByid({ id: state.list[index].id }).then((res) => {
        state.list.splice(index, 1);
      });
    };
    //搜索歌曲
    const search = () => {
      let form = new FormData();
      form.append("str", state.word);
      searchMusic(form).then((res: any) => {
        state.list = res.data;
      });
    };
    const getMusicList = () => {
      musicGetall({}).then((res: any) => {
        state.list = res.data;
      });
    };
    const addTomenu = (index:number) => {
      state.dialogVisible = true;
      state.index=index
    }
     const toAdd = ( ) => {
      state.dialogVisible = false;
      let form = new FormData();
      form.append("musicId", state.list[state.index].id+"");
      form.append("musicListId", state.menuId);
      insertbymusiclist(form).then((res)=>{
console.log(res)
      })
     };
    onMounted: {
      getMusicList();
    }
    return { ...toRefs(state), upIndex, deleteMusic, search, addTomenu,toAdd };
  },
  components: {},
};
</script>
  <style lang="less" scoped>
.MusicAdmin {
  .addmenu {
    background-color: red;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    width: 50px;
    height: 25px;
    margin-top: 10px;
  }
  .searchButto {
    width: 100px;
    position: absolute;
    top: 10px;
    left: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 10px;
    background-color: @subject_green;
    height: 40px;
  }
  .search {
    width: 200px;
    position: absolute;
    top: 10px;
    left: 10px;
  }
  .form {
    overflow-y: scroll;
    height: 500px;
    margin-top: 100px;
    .heart {
      width: 80%;
      background-color: @subject_green;
      height: 40px;
      display: flex;
      .heartItem {
        width: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }
    }
    .list {
      width: 80%;
      background-color: #fff;
      display: flex;
      flex-wrap: wrap;
      .itemBox {
        display: flex;
        width: 100%;
        .listitem {
          width: 20%;
          display: flex;
          height: 40px;
          align-items: center;
          justify-content: center;
          border-bottom: 1px #000 solid;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          img {
            width: 30px;
            height: 30px;
            margin: 5px;
          }
        }
      }
    }
  }
}
</style>